
<!-- @tce
代码说明： 维修管理的标题栏
创建时间：2024.9.20       开发者：liyongqi
使用项目：liyongqi   代码版本：V1.0 -->


<template>
  <div class="status-maintenance-page">
    <el-row class="maintenance-navbar" type="flex" justify="space-between" align="middle">
      <el-col :span="20">
        <el-menu background-color="#000C34" text-color="#4bc3ec" :default-active="selectedTab" mode="horizontal" @select="handleSelect">
          <el-menu-item index="maintenance-plan-management">维修计划管理</el-menu-item>
<!--          FIXME:按钮点击没反应-->
<!--          <el-menu-item index="maintenance-event-management">维修事件管理</el-menu-item>-->
        </el-menu>
      </el-col>
    </el-row>
    <div class="content-wrapper">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="24">
          <div v-if="selectedTab === 'maintenance-plan-management'">
            <!-- 维修计划管理的内容 -->
            <MaintenancePlanManagement />
          </div>
          <div v-else-if="selectedTab === 'maintenance-event-management'">
            <!-- 维修事件管理的内容 -->
            <MaintenanceEventManagement />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MaintenancePlanManagement from '@/views/MaintenanceManagement/MaintenancePlanManagement.vue';
import MaintenanceEventManagement from '@/views/MaintenanceManagement/MaintenanceEventManagement.vue'; // 导入传感器管理组件

export default {
  name: 'SystemManagementPage',
  components: {
    MaintenancePlanManagement,
    MaintenanceEventManagement, // 注册传感器管理组件
  },
  data() {
    return {
      breadcrumbs: ['维修管理', '维修事件管理'],
      selectedTab: 'maintenance-plan-management', // 默认选中传感器信息管理
    };
  },
  methods: {
    handleSelect(key) {
      if (key !== null) {
        this.selectedTab = key;
        this.updateBreadcrumbs();
      }
    },
    updateBreadcrumbs() {
      if (this.selectedTab === 'device-info-management') {
        this.breadcrumbs = ['维修管理', '维修计划管理'];
      } else if (this.selectedTab === 'maintenance-event-management') {
        this.breadcrumbs = ['维修管理', '维修事件管理'];
      }
    },
  },
};
</script>

<style scoped>
/* 整体页面背景颜色 */
.status-maintenance-page {
  background-color: #000C34;
  min-height: 100vh;
  padding: 20px;
  color: #C0C4CC;
}

/* 导航栏样式 */
.monitor-navbar {
  background-color: #000C34!important;
  /*padding: 10px;*/
  margin-bottom: 20px;
}

/* 选中菜单项样式 */
.el-menu-item.is-active {
  color: white!important;
  border: 1px solid #0062ff;
  background-color: #0062ff!important;
  height: 30px;
}
/* 暂时不要分割线 */
.el-menu--horizontal.el-menu {
  border-bottom: 1px solid  #053789;
  display: block;
  width: 93vw;
}
/*嵌入后调整*/
.el-row.is-justify-space-between {
  justify-content: left !important;
}

/* 内容区域样式 */
.content-wrapper {
  margin-top: 20px;
}
</style>
  